import DocCardBox from "@/components/doc-card"
import React from "react"
import { DemoL1, demoL1Json } from "./demo/DemoL1"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "baseUse",
        hash: "dlg-l-demo1",
        coms: [<DemoL1 key={0} />],
        comsJson: [demoL1Json()],
        desc: [{ text: "dlg_1_1_1" }]
    }
]

const rightList = [
    {
        titleKey: "static_fn",
        hash: "dlg-r-demo1",
        coms: [<DemoL1 key={0} />],
        comsJson: [demoL1Json(true)],
        desc: [{ text: "dlg_1_1_1" }]
    }
]

function Dialog() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "DialogProps",
            data: [
                {
                    schema: "open",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("yes"),
                    desc: t("desc_dlg_1")
                },
                {
                    schema: "onClose",
                    type: "(e?:any) => void",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_dlg_2")
                },
                {
                    schema: "title",
                    type: "ReactNode",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_dlg_3")
                },
                {
                    schema: "closeIcon",
                    type: "boolean | ReactElement",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_dlg_4")
                },
                {
                    schema: "direction",
                    type: "TBLRC",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_dlg_5")
                },
                {
                    schema: "footer",
                    type: "ReactElement",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_dlg_6")
                },
                {
                    schema: "classNames",
                    type: "DialogClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_dlg_7")
                }
            ]
        },
        {
            title: "DialogClassNames",
            data: [
                {
                    schema: "box",
                    type: "string",
                    defaultValue: "fixed z-1000 bg-white",
                    isRequire: t("no"),
                    desc: t("cls_box")
                },
                {
                    schema: "mask",
                    type: "string",
                    defaultValue: "fixed left-0 right-0 top-0 bottom-0 z-1000 bg-mask",
                    isRequire: t("no"),
                    desc: t("cls_mask")
                },
                {
                    schema: "mask:center",
                    type: "string",
                    defaultValue: "flex items-center justify-center",
                    isRequire: t("no"),
                    desc: t("cls_mask_center")
                },
                {
                    schema: "box:right",
                    type: "string",
                    defaultValue: "right-0 top-0 min-w-60 h-full rounded-l-lg",
                    isRequire: t("no"),
                    desc: t("dlg_box_r")
                },
                {
                    schema: "box:right:apper",
                    type: "string",
                    defaultValue: "animate-translate-x-100-0",
                    isRequire: t("no"),
                    desc: t("dlg_box_r_a")
                },
                {
                    schema: "box:right:disapper",
                    type: "string",
                    defaultValue: "animate-translate-x-0-100",
                    isRequire: t("no"),
                    desc: t("dlg_box_r_disa")
                },
                {
                    schema: "body",
                    type: "string",
                    defaultValue: "w-full py-2",
                    isRequire: t("no"),
                    desc: t("body")
                }
            ]
        },
        {
            title: "TBLRC",
            data: [
                {
                    schema: "direction",
                    type: "string",
                    defaultValue: "right",
                    isRequire: t("no"),
                    desc: t("desc_tblrc")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Dialog" desc="dialogDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default Dialog
